:root {
    /* 声明变量 */
    --radius: 12px;
}

.user-list {
    display: flex;
    flex-flow: row wrap;
}

.user-card {
    width: 300px;
    display: flex;
    flex-flow: row nowrap;
    box-shadow: 0 0 10px #999;
    /* border-radius: 12px; */
    /* var(变量名) 完成变量调用 */
    border-radius: var(--radius);
    margin: 20px;
}

.user-card .head {
    /* 关闭压缩比 */
    flex-shrink: 0;
    width: 120px;
    overflow: hidden;
    /* border-radius: 12px; */
    /* var(变量名) 完成变量调用 */
    border-radius: var(--radius);
}

.user-card .head img {
    width: 100%;
    height: 100%;
    /* object-fit: scale-down; */
    /* img 标签的图片展示方式 */
    object-fit: cover;
    /* img 标签的图片定位方式 */
    object-position: center;
}

.user-card .info {
    /* 弹性盒子的问题修复 */
    width: 0;
    flex-shrink: 0;
    flex-grow: 1;
    font-size: 14px;
    padding: 12px;
    /* 以倍数方式构建行间距 */
    line-height: 1.6;
}

.user-card .info .row {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    min-width: 100%;
}

.user-card .info .row:hover {
    background-color: black;
    color: white;
    padding: 0px 10px;
    margin-left: -10px;
    border-radius: 8px;
    box-shadow: 0 0 6px #999;
    /* unset 删除用户定义样式，恢复浏览器默认样式 */
    overflow: unset;
    /* fit-content 按照内容填充，优先权高于弹性盒子 */
    width: fit-content;
}

.user-card .info .row span:first-child {
    color: #999;
    display: inline-block;
    width: 60px;
    /* 文本内容两端对齐 */
    text-align: justify;
    /* 为两端对象增加行位换行符 */
    text-align-last: justify;
}

.user-card .info .row span:last-child::before {
    content: ":";
    padding: 0px 4px;
    font-size: 16px;
}